<template>
  <div class="title-container">
    <IconSvg
      v-if="icon_front"
      :iconClass="icon_front"
      class="icon_title"
    ></IconSvg>
    <h1 class="title">{{ title_text }}</h1>
  </div>
</template>

<script>
import IconSvg from '@/components/IconSvg';
export default {
  name: 'Title',
  components: {
    IconSvg
  },
  props: {
    // 文字前的图标，没有传就代表没有图标
    icon_front: {
      default: '',
      type: String
    },
    // 标题文本
    title_text: {
      default: '标题',
      type: String
    }
  }
};
</script>

<style lang="less" scoped>
.title-container {
  display: flex;
  align-items: center;
  margin-right: 10px;
  .icon_title {
    font-size: 3rem;
  }
  .title {
    font-size: 2.4rem;
    line-height: 34px;
    margin-left: 5px;
    cursor: pointer;
    transition: color 0.3s linear;
    &:hover {
      color: #00aeec;
    }
  }
}
</style>
